$color_command: #7dc3f3;
$color_event: #fca65b;
$color_concept: #fae99a;
$color_entity: #77ca9a;

$color_rule: #fae99a;
$color_role: #fdf9c2;
$color_scheduler: #77ca9a;
$color_ext_system: #ed9fc2;
$color_comment: #cc1754;

$selected_border_color: #727272;

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}

:host {
  display: flex;
  width: fit-content;
}

.domain-design {
  display: inline-block;
  float: left;

  min-width: 400px;
  max-width: 820px;
  width: 818px;
  min-height: 600px;

  padding: 20px;
  margin: 10px;
  border: 4px $selected_border_color dashed;
  box-sizing: border-box;
  visibility: inherit;
  //width: fit-content;
}

.mwlResizable {
  box-sizing: border-box; // required for the enableGhostResize option to work
}

.aggregate-container {
  min-width: 600px;
  width: 100%;
}

.create-item,
.drag-item {
  @extend .noselect;

  width: 100px;
  height: 100px;
  margin: 0 10px 10px 0;
  text-align: center;
  float: left;
}

.create-item {
  opacity: 0.39;
  width: 96px;

  border: 2px $color_entity dotted;
}

textarea {
  width: 88px;
  height: 94px;
}

.drag-item.vo {
  background-color: $color_entity;
}

.drag-item.entity {
  background-color: $color_concept;
}

.new-group {
  clear: both;
}

.new-group-item {
  width: 98px;
  height: 98px;
  margin: 0 10px 10px 0;
  text-align: center;
  float: left;

  opacity: 0.39;
  border: 2px $color_event dashed;
}

.group-handle {
  @extend .drag-item;
  @extend .entity;

  clear: left;
}

.drag-item.entity::before {
  display: block;
  clear: both;
}

.block {
  clear: both;
  display: block;
}

.vo-menu {
  @extend .noselect;

  background-color: #fff;
  border-radius: 6px;
  padding: 10px 20px;
}

textarea:focus {
  border: none;
  overflow: auto;
  outline: none;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;

  resize: none; /*remove the resize handle on the bottom right*/
}
